<template>
  <div>
    <div class="sdsss">
      <vue-seamless-scroll :data="posdata" class="warpgg" :class-option="defaultOption">
        <!-- 循环渲染每条数据 -->
        <div v-for="(item, index) in posdata" :key="index" class="ggffssdsd">
          <div class="listd">
            <div class="hs">
              <span>序号：</span>
              <span>{{ index + 1 }}</span>
            </div>
            <div class="hs">
              <span>车辆名称：</span>
              <span class="stuas">{{ item.name }}</span>
            </div>

            <div class="hs">
              <span>时间：</span>
              <span>{{ item.createDate }}</span>
            </div>
          </div>
          <div class="listd">
            <div class="hs">
              <span>急加速：</span>
              <span class="huangs">{{ item.jiasu }}</span>
            </div>

            <div class="hs">
              <span>急减速：</span>
              <span class="huangs">{{ item.jiasu }}</span>
            </div>

            <div class="hs">
              <span>超速：</span>
              <span class="huangs">{{ item.chaosu }}</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      posdata: [
        {
          name: "车辆00A",
          jiasu: "60km/小时",
          jiansu: "35km/小时",
          yaw: "45km/小时",
          chaosu: "78km/小时",
          createDate: "2025-06-18 09:12:34"
        },
        {
          name: "车辆00B",
          jiasu: "50km/小时",
          jiansu: "25km/小时",
          yaw: "30km/小时",
          chaosu: "65km/小时",
          createDate: "2025-06-18 10:45:21"
        },
        {
          name: "车辆00C",
          jiasu: "70km/小时",
          jiansu: "40km/小时",
          yaw: "50km/小时",
          chaosu: "85km/小时",
          createDate: "2025-06-18 12:01:17"
        },
        {
          name: "车辆00D",
          jiasu: "45km/小时",
          jiansu: "15km/小时",
          yaw: "25km/小时",
          chaosu: "62km/小时",
          createDate: "2025-06-18 14:32:17"
        },
        {
          name: "车辆00E",
          jiasu: "55km/小时",
          jiansu: "30km/小时",
          yaw: "35km/小时",
          chaosu: "70km/小时",
          createDate: "2025-06-18 16:22:45"
        },
        {
          name: "车辆00F",
          jiasu: "65km/小时",
          jiansu: "50km/小时",
          yaw: "40km/小时",
          chaosu: "80km/小时",
          createDate: "2025-06-19 08:10:33"
        },
        {
          name: "车辆00G",
          jiasu: "40km/小时",
          jiansu: "20km/小时",
          yaw: "28km/小时",
          chaosu: "68km/小时",
          createDate: "2025-06-19 10:05:12"
        },
        {
          name: "车辆00H",
          jiasu: "75km/小时",
          jiansu: "35km/小时",
          yaw: "55km/小时",
          chaosu: "90km/小时",
          createDate: "2025-06-19 12:44:09"
        },
        {
          name: "车辆00I",
          jiasu: "50km/小时",
          jiansu: "25km/小时",
          yaw: "30km/小时",
          chaosu: "66km/小时",
          createDate: "2025-06-19 15:17:23"
        },
        {
          name: "车辆00J",
          jiasu: "60km/小时",
          jiansu: "45km/小时",
          yaw: "45km/小时",
          chaosu: "75km/小时",
          createDate: "2025-06-19 17:33:11"
        },
        {
          name: "车辆00K",
          jiasu: "55km/小时",
          jiansu: "20km/小时",
          yaw: "35km/小时",
          chaosu: "72km/小时",
          createDate: "2025-06-20 09:20:44"
        },
        {
          name: "车辆00L",
          jiasu: "68km/小时",
          jiansu: "30km/小时",
          yaw: "48km/小时",
          chaosu: "82km/小时",
          createDate: "2025-06-20 11:11:55"
        },
        {
          name: "车辆00M",
          jiasu: "48km/小时",
          jiansu: "22km/小时",
          yaw: "26km/小时",
          chaosu: "63km/小时",
          createDate: "2025-06-20 13:44:02"
        },
        {
          name: "车辆00N",
          jiasu: "72km/小时",
          jiansu: "55km/小时",
          yaw: "50km/小时",
          chaosu: "88km/小时",
          createDate: "2025-06-20 15:30:19"
        },
        {
          name: "车辆00O",
          jiasu: "50km/小时",
          jiansu: "25km/小时",
          yaw: "32km/小时",
          chaosu: "67km/小时",
          createDate: "2025-06-20 17:15:08"
        },
        {
          name: "车辆00P",
          jiasu: "60km/小时",
          jiansu: "40km/小时",
          yaw: "40km/小时",
          chaosu: "76km/小时",
          createDate: "2025-06-21 09:55:37"
        },
        {
          name: "车辆00Q",
          jiasu: "58km/小时",
          jiansu: "35km/小时",
          yaw: "38km/小时",
          chaosu: "73km/小时",
          createDate: "2025-06-21 11:08:22"
        },
        {
          name: "车辆00R",
          jiasu: "63km/小时",
          jiansu: "30km/小时",
          yaw: "42km/小时",
          chaosu: "79km/小时",
          createDate: "2025-06-21 13:20:14"
        },
        {
          name: "车辆00S",
          jiasu: "52km/小时",
          jiansu: "28km/小时",
          yaw: "33km/小时",
          chaosu: "69km/小时",
          createDate: "2025-06-21 15:03:41"
        },
        {
          name: "车辆00T",
          jiasu: "66km/小时",
          jiansu: "42km/小时",
          yaw: "47km/小时",
          chaosu: "83km/小时",
          createDate: "2025-06-21 16:30:00"
        }
      ]
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.posdata.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  }
};
</script>

<style>
* {
  list-style-type: none;
}
.sdsss {
  position: relative;
}
.sdsss .ggffssdsd {
  width: 100%;
  height: 90px;
  display: inline-block;
  /* background-color: chartreuse; */
  /* 设置下边框 */
  /* 清除所有边框 */
  border: none;
  /* 仅设置下边框 */
  border-bottom: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}

.sdsss .ggffssdsd:first-child {
  /* 仅设置下边框 */
  border-top: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}
.hs {
  margin-top: 4px;
  width: 210px;
  /* background-color: #29fc29; */
}
.hs span:nth-child(1) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
.hs span:nth-child(2) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}
.stuas {
  color: #1890ff !important;
  font-size: 18px !important;
}

.warpgg {
  height: 430px;
  /* 设置滚动区域的高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  /* border: 1px solid #ccc; 可选：添加边框 */
}

.zhengchgahgt {
  color: #29fc29 !important;
}
.guzhang {
  color: #fc1a1a !important;
}
.listd {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.huangs {
    color: #e6a23c !important;
}
</style>